
// mixin
@mixin button-line-variant($color, $background, $border) {
    color: $text-color;
    background-color: transparent; 
    border-color: $border;

    &:hover,
    &:focus,
    &:active,
    &.active {
        color: $color;
        background-color: $background;
    }
    .open & {
        &.dropdown-toggle {
            color: $color;
            background-color: $background;
        }
    }
}

@mixin button-icon-variant($size) {
    height: $size;
    width: $size;
    line-height: $size;
    i { line-height: $size; }
    &.btn-icon-lined {
        line-height: ($size - 4px);
        i { line-height: ($size - 4px); }

        &.btn-icon-thin {
            line-height: ($size - 2px);
            i { line-height: ($size - 2px); }
        }
    }    
}

@mixin social-button-variant($background, $border) {
    color: $reverse;
    background-color: $background;
    border-color: $border;
    &:hover {
        color: $reverse;
        text-decoration: none;
        background-color: darken($background, 8%);
        border-color: darken($border, 12%)        
    }    
}

// add to default button
.btn-info-alt {
    @include button-variant($btn-info-alt-color, $btn-info-alt-bg, $btn-info-alt-border);
}
.btn-dark {
    @include button-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
}

// lined version
.btn-line-default {
    @include button-line-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-line-primary {
    @include button-line-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-line-success {
    @include button-line-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-line-info {
    @include button-line-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-line-warning {
    @include button-line-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-line-danger {
    @include button-line-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
.btn-line-dark {
    @include button-line-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
}

// 
.btn-direction {
    position: relative;
    border: 0;
    line-height: 20px;
}
.btn-left {
    @include border-left-radius(0);
    &:before {
        content: " ";
        line-height: 0;
        position: absolute;
        top: 0;
        left: -26px;
        border: 16px solid transparent;
        border-right: 10px solid $btn-default-bg;
    }
    &:hover {
        &:before {
            border-right: 10px solid darken($btn-default-bg, 10%);
        }
    }

    // Color
    &.btn-primary {
        &:before {
            border-right: 10px solid $btn-primary-bg;
        }
        &:hover {
            &:before {
                border-right: 10px solid darken($btn-primary-bg, 10%);
            }
        }
    }
    &.btn-success {
        &:before {
            border-right: 10px solid $btn-success-bg;
        }
        &:hover {
            &:before {
                border-right: 10px solid darken($btn-success-bg, 10%);
            }
        }
    }
    &.btn-info {
        &:before {
            border-right: 10px solid $btn-info-bg;
        }
        &:hover {
            &:before {
                border-right: 10px solid darken($btn-info-bg, 10%);
            }
        }
    }
    &.btn-warning {
        &:before {
            border-right: 10px solid $btn-warning-bg;
        }
        &:hover {
            &:before {
                border-right: 10px solid darken($btn-warning-bg, 10%);
            }
        }
    }
    &.btn-danger {
        &:before {
            border-right: 10px solid $btn-danger-bg;
        }
        &:hover {
            &:before {
                border-right: 10px solid darken($btn-danger-bg, 10%);
            }
        }
    }
}
.btn-right {
    @include border-right-radius(0);
    &:before {
        content: " ";
        line-height: 0;
        position: absolute;
        top: 0;
        right: -26px;
        border: 16px solid transparent;
        border-left: 10px solid $btn-default-bg;
    }
    &:hover {
        &:before {
            border-left: 10px solid darken($btn-default-bg, 10%);
        }
    }

    // Color
    &.btn-primary {
        &:before {
            border-left: 10px solid $btn-primary-bg;
        }
        &:hover {
            &:before {
                border-left: 10px solid darken($btn-primary-bg, 10%);
            }
        }
    }
    &.btn-success {
        &:before {
            border-left: 10px solid $btn-success-bg;
        }
        &:hover {
            &:before {
                border-left: 10px solid darken($btn-success-bg, 10%);
            }
        }
    }
    &.btn-info {
        &:before {
            border-left: 10px solid $btn-info-bg;
        }
        &:hover {
            &:before {
                border-left: 10px solid darken($btn-info-bg, 10%);
            }
        }
    }
    &.btn-warning {
        &:before {
            border-left: 10px solid $btn-warning-bg;
        }
        &:hover {
            &:before {
                border-left: 10px solid darken($btn-warning-bg, 10%);
            }
        }
    }
    &.btn-danger {
        &:before {
            border-left: 10px solid $btn-danger-bg;
        }
        &:hover {
            &:before {
                border-left: 10px solid darken($btn-danger-bg, 10%);
            }
        }
    }
}

$btn_arrow_width:     8px;
.btn-up {
    &:before {
        content: " ";
        line-height: 0;
        position: absolute;
        top: -16px;
        left: 50%;
        margin-left: -$btn_arrow_width;
        border: $btn_arrow_width solid transparent;
        border-bottom: $btn_arrow_width solid $btn-default-bg;
    }
    &:hover {
        &:before {
            border-bottom: $btn_arrow_width solid darken($btn-default-bg, 10%);
        }
    }  

    // Color
    &.btn-primary {
        &:before {
            border-bottom: $btn_arrow_width solid $btn-primary-bg;
        }
        &:hover {
            &:before {
                border-bottom: $btn_arrow_width solid darken($btn-primary-bg, 10%);
            }
        }
    }
    &.btn-success {
        &:before {
            border-bottom: $btn_arrow_width solid $btn-success-bg;
        }
        &:hover {
            &:before {
                border-bottom: $btn_arrow_width solid darken($btn-success-bg, 10%);
            }
        }
    }
    &.btn-info {
        &:before {
            border-bottom: $btn_arrow_width solid $btn-info-bg;
        }
        &:hover {
            &:before {
                border-bottom: $btn_arrow_width solid darken($btn-info-bg, 10%);
            }
        }
    }
    &.btn-warning {
        &:before {
            border-bottom: $btn_arrow_width solid $btn-warning-bg;
        }
        &:hover {
            &:before {
                border-bottom: $btn_arrow_width solid darken($btn-warning-bg, 10%);
            }
        }
    }
    &.btn-danger {
        &:before {
            border-bottom: $btn_arrow_width solid $btn-danger-bg;
        }
        &:hover {
            &:before {
                border-bottom: $btn_arrow_width solid darken($btn-danger-bg, 10%);
            }
        }
    }  
}
.btn-down {
    &:before {
        content: " ";
        line-height: 0;
        position: absolute;
        bottom: -16px;
        left: 50%;
        margin-left: -$btn_arrow_width;
        border: $btn_arrow_width solid transparent;
        border-top: $btn_arrow_width solid $btn-default-bg;
    }
    &:hover {
        &:before {
            border-top: $btn_arrow_width solid darken($btn-default-bg, 10%);
        }
    }  

    // Color
    &.btn-primary {
        &:before {
            border-top: $btn_arrow_width solid $btn-primary-bg;
        }
        &:hover {
            &:before {
                border-top: $btn_arrow_width solid darken($btn-primary-bg, 10%);
            }
        }
    }
    &.btn-success {
        &:before {
            border-top: $btn_arrow_width solid $btn-success-bg;
        }
        &:hover {
            &:before {
                border-top: $btn_arrow_width solid darken($btn-success-bg, 10%);
            }
        }
    }
    &.btn-info {
        &:before {
            border-top: $btn_arrow_width solid $btn-info-bg;
        }
        &:hover {
            &:before {
                border-top: $btn_arrow_width solid darken($btn-info-bg, 10%);
            }
        }
    }
    &.btn-warning {
        &:before {
            border-top: $btn_arrow_width solid $btn-warning-bg;
        }
        &:hover {
            &:before {
                border-top: $btn_arrow_width solid darken($btn-warning-bg, 10%);
            }
        }
    }
    &.btn-danger {
        &:before {
            border-top: $btn_arrow_width solid $btn-danger-bg;
        }
        &:hover {
            &:before {
                border-top: $btn_arrow_width solid darken($btn-danger-bg, 10%);
            }
        }
    }  
}

//
.btn-w-xs { min-width: 80px; }
.btn-w-sm { min-width: 100px; }
.btn-w-md { min-width: 120px; }
.btn-w-lg { min-width: 150px; }

// 
.btn-round { border-radius: 2em; }
.btn-gap { margin: 5px; }
.btn-gap-h { margin: 0 5px; }
.btn-gap-v { margin: 0 0 5px; }

// 
.btn-icon {
    display: inline-block;
    text-align: center;
    border-radius: $border-radius-base;
    @include button-icon-variant(35px);
    &:hover {
        color: $reverse;
    }
}
.btn-icon-lined {
    display: inline-block;
    text-align: center;
    border-radius: $border-radius-base;
    background-color: $reverse;
    border-width: 2px;
    border-style: solid;
    border-color: $text-color;
    color: $text-color;
    @include button-icon-variant(35px);
    &.btn-icon-thin {
        border-width: 1px;
    }
    &:hover {
        background-color: $reverse;
        color: $reverse;
    }

    // 
    &.btn-default-light {
        color: #bbb;
        border: 2px solid #bbb;

        &:hover {
            color: #bbb;
            border: 2px solid #bbb;
        }
    }
    &.btn-default {
        color: $gray-light;
        border-color: $gray-light;

        &:hover {
            color: $gray-light;
            border-color: $gray-light;
        }
    }
    &.btn-primary {
        color: $brand-primary;
        border-color: $brand-primary;
    }
    &.btn-success {
        color: $brand-success;
        border-color: $brand-success;
    }
    &.btn-info {
        color: $brand-info;
        border-color: $brand-info;
    }
    &.btn-warning {
        color: $brand-warning;
        border-color: $brand-warning;
    }
    &.btn-danger {
        color: $brand-danger;
        border-color: $brand-danger;
    }  
}
.btn-icon-round {
    border-radius: 50%;
}
.btn-icon-sm {
    @include button-icon-variant(30px);
}
.btn-icon-md {
    @include button-icon-variant(45px);
}
.btn-icon-lg {
    @include button-icon-variant(65px);
}
.btn-icon-lg-alt {
    @include button-icon-variant(70px);
}
.btn-icon-xl {
    @include button-icon-variant(80px);
}


// social buttons
.btn-twitter { @include social-button-variant(#00c7f7, #00c7f7); }
.btn-facebook { @include social-button-variant(#335397, #335397); }
.btn-gplus,
.btn-google-plus { @include social-button-variant(#dd4a38, #dd4a38); }
.btn-instagram { @include social-button-variant(#82685A, #82685A); }
.btn-vimeo { @include social-button-variant(#63879C, #63879C); }
.btn-flickr { @include social-button-variant(#0061DB, #0061DB); }
.btn-github { @include social-button-variant(#3B3B3B, #3B3B3B); }
.btn-pinterest { @include social-button-variant(#D73532, #D73532); }
.btn-tumblr { @include social-button-variant(#586980, #586980); }
.btn-linkedin { @include social-button-variant(#018FAF, #018FAF); }
.btn-dribbble { @include social-button-variant(#EA73A0, #EA73A0); }
.btn-stumbleupon { @include social-button-variant(#EA4B24, #EA4B24); }
.btn-lastfm { @include social-button-variant(#B80638, #B80638); }
.btn-evernote { @include social-button-variant(#3BAB27, #3BAB27); }
.btn-skype { @include social-button-variant(#00B0F6, #00B0F6); }
.btn-soundcloud { @include social-button-variant(#0066FF, #0066FF); }
.btn-behance { @include social-button-variant(#B80638, #B80638); }
.btn-rss { @include social-button-variant(#F79638, #F79638); }
.btn-youtube { @include social-button-variant(#CC181E, #CC181E); }


// Button metro
.btn-metro {
    position: relative;
    padding: 0;
    border: 0;
    width: 180px;
    height: 180px;
    font-size: 21px;
    text-align: center;

    i {
        font-size: 48px;
        line-height: 180px;
    }

    span {
        position: absolute;
        left: 15px;
        bottom: 15px;
    }
}